{% extends "admin/admin_base.html" %}
{% block style %}

        input[type='number']{
            width: 100px;
        }
        .btn{
            margin-right: 30px;

        }
{% endblock %}
{% block content %}

		<div class="container-fluid">
			<div class="row">

				<div class="col-md-12">
					<!-- 媒体列表 -->
                    <h3>用户管理</h3>
                    <div class="panel">
                        <form action=""  method="post" class="form-horizontal" >
                            <div class="form-group">
                                <label for="q" class="col-xs-2 control-label">关键字</label>
                                <div class="col-xs-10">
                                    <input type="text" name="q" class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="field" class="col-xs-2 control-label">查询字段</label>
                                <div class="col-xs-10">
                                    <select name="field" class="form-control">
                                        <option value="realname">查询字段</option>
                                        <option value="realname">真实名字</option>
                                        <option value="username">用户昵称</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="sex" class="col-xs-2 control-label">性别</label>
                                <div class="col-xs-2">
                                   <select name="sex" class="form-control">
                                        <option value="1" checked>男</option>
                                        <option value="0">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="排序" class="col-xs-2 control-label">排序</label>
                                <div class="col-xs-2">
                                   <select name="order" class="form-control">
                                        <option value="1" checked>按照id升序排序</option>
                                        <option value="2">按照id降序排序</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group ">

                                <input type="submit" name="search" class="btn btn-primary pull-right" value="立即搜索">
                            </div>

                        </form>
                    </div>
                    <table class="table">
                        <tr>
                            <td>总页数:{{ pages }}/总记录:{{ total }}</td>
                        </tr>
                    </table>
					<table class="table table-bordered ">

                        <tr>
                            <th>用户id</th>
                            <th>用户名</th>
                            <th>真实名</th>
                            <th>性别</th>
                            <th>城市</th>
                            <th>操作</th>
                        </tr>
                        {% for user in users %}
                        <tr id="user_{{ user.id }}">
                            <td>{{ user.id }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.realname }}</td>
                            <td>{{ user.sex }}</td>
                            <td>{{ user.city }}</td>
                            <td>
                                <a href="{{ url_for("admin_app.editUser", user_id=user.id) }}">修改</a>
                               <!-- <a href="#" onclick="delUser({{ user.id}})">删除</a>-->
                               <!--直接在href中书写js，可以避免在href中写#发生页面跳动的现象-->
                                <a href="javascript:delUser({{ user.id}})">删除</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
					<!--  -->
					<ul class="pagination">
                        {% for page in pageList %}
                            {% if page!=None %}
						<li><a href="{{ url_for("admin_app.userList", page=page) }}">{{ page }}</a></li>
                            {% else %}
                            <li><a href="#">...</a></li>
                            {% endif %}
						{% endfor %}
					</ul>
				</div>


				</div>
			</div>
		</div>
        <script>
            function delUser(userid){
                $.ajax({
                    type:"post",
                    url: '{{ url_for("admin_app.deleteUser") }}',
                    data: {user_id:userid},
                    dataType: "json",
                    beforeSend:function(xhr){
                        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token()}}')
                    },
                    success: function(data){
                        if (data.result=="success"){
                            $("#user_"+userid).html(
                                "<td colspan=6>" + "删除成功"+"</td>")
                        } else {
                            alert("删除过程发生错误，请重新尝试")
                        }
                    }
                })
            }
     </script>

{% endblock %}

	</body>
</html>
